<div class='title'>文件目录</div>
<div class='text'>使用cli 工具初始化项目 或 手动下载Jet压缩包解压之后，会有如下的文件结构：</div>
<div class='text'>但是这两种方式使用略有不同。如下表标注，使用cli 工具初始化项目中会有 build.config.json 文件。</div>
<div class='text'>而下载压缩包会有 node_modules ，package.json，package-lock.json 文件。</div>
<div class='text'>注：使用以下目录的基础是引入了router。若是使用标签引入的方式则不用关心这些，只需要引入一个标签即可。</div>
<div class='text'>
    <div class='list'>
        <div><i class="icon icon-folder-close-alt"></i> 
            assets 
            <span class='light-text'>(框架相关的代码和资源，无需开发者关注)</span>
        </div>
        <div><i class="icon icon-folder-close-alt"></i> 
            node_modules  <span class="red">[下载Jet压缩包方式]</span>
            <span class='light-text'>(主要是lite-server相关的依赖，无需开发者关注)</span>
        </div>
        <div style="color:#4a4"><i class="icon icon-folder-open-alt"></i> 
            <span>src</span>
            <span class='light-text'>(开发者主要编写代码的目录)</span>
            <div class='list'>
                <div><i class="icon icon-folder-open-alt"></i> css 
                    <span class='light-text'>(css 文件目录)</span>
                    <div class='list'>
                        <div><i class="icon icon-file-code"></i> common.css
                            <span class='light-text'>(全局公共样式)</span>
                        </div>
                        <div><i class="icon icon-file-code"></i> css.conf
                            <span class='light-text'>(css 配置文件)</span>
                        </div>
                    </div>
                </div>
                <div><i class="icon icon-folder-close-alt"></i> html 
                    <span class='light-text'>(页面模板和组件的目录)</span>
                </div>
                <div><i class="icon icon-folder-close-alt"></i> image
                    <span class='light-text'>(图片资源目录)</span>
                </div>
                <div><i class="icon icon-folder-close-alt"></i> js
                    <span class='light-text'>(js文件和模块文件)</span>
                </div>
                <div><i class="icon icon-folder-close-alt"></i> media
                    <span class='light-text'>(媒体资源文件)</span>
                </div>
                <div class='link' jump-to='config'><i class="icon icon-file-code"></i> config.js
                    <span class='light-text'>(在index.html中引用了该文件，该文件是一个全局配置文件，作用是加载依赖库、设置路由、国际化、验证等初始化参数。)</span></div>
                <div><i class="icon icon-file-code"></i> root.html
                    <span class='light-text'>(根组件)</span></div>
                <div><i class="icon icon-file-code"></i> root.js
                    <span class='light-text'>(根组件的js部分，也可将其放入root.html中，该文件非必需)</span></div>
            </div>
        </div>
        <div class='link' jump-to='build.config'><i class="icon icon-file-code"></i> build.config.json <span class="red">[使用 cli 工具方式]</span>
            <span class='light-text'>(项目信息和 jet build命令需要的一些配置信息)</span></div>
        <div><i class="icon icon-file-code"></i> index.html
            <span class='light-text'>(入口html文件，开发者除了修改head中的信息外，基本无需关注)</span></div>
        <div><i class="icon icon-file-code"></i> package.json <span class="red">[下载Jet压缩包方式]</span>
            <span class='light-text'>(项目信息与相关依赖，无需开发者关注)</span></div>
        <div><i class="icon icon-file-code"></i> package-lock.json <span class="red">[下载Jet压缩包方式]</span>
            <span class='light-text'>(项目信息与相关依赖，无需开发者关注)</span></div>
    </div>
</div>
<div class='title' jump-des='config'>config.js</div>
<div class='text'>
    使用 jet-js-cli 安装使用Jet 或下载Jet-template使用Jet 才需要关注这个文件。
</div>
<div class='text'>
    这文件可以看作Jet项目的入口，所以的Jet配置项都被推荐在这里完成，例如配置babel，less，router，lang等，以下是部分主要的可配置项：
</div>
<div class='j-code not-test' disabled width='99%' height='auto'>

Jet.use.all(//加载所有官方库，请参考官方库章节
    '-render-time',//排除某个官方库
    function(){//加载完成的回调函数
        //对官方库进行一些配置 详情请参考对应的章节
        JUI.CODE.tab="  ";
        Jet.valid.language="english";
        Jet.lang.use(['en','cn']);
        Jet.router.setBase('/base',false);

        Jet.res.define({
            ...
        })

        Jet.router.use({
            ...
        })
        ...
    }
)
</div>
<div class='title' jump-des='build.config'>build.config.json</div>
<div class='text'>
    使用 jet-js-cli 安装使用Jet 才需要关注这个文件。
</div>
<div class='text'>
    这个文件的主要作用是在使用 jet build 打包项目时，控制一些打包参数，主要需要开发者配置其中的 jetConfig 参数，具体配置参数如默认值如下：
</div>
<div class='j-code not-test' disabled width='99%' height='auto'>
    ...
    "jetConfig": {
        "compressHtml": true,
        "compressCss": true,
        "compressJs": true,
        "buildJsWithBabel": false,
        "buildCssWithLess": false,
        "commonLess":false
    }
    ...
</div>

<div class='text'>
    <div class='list'>
        <div>1.compressHtml ： 表示是否需要压缩 .html 代码</div>
        <div>2.compressCss ： 表示是否需要压缩 css 代码</div>
        <div>3.compressJs ： 表示是否需要压缩 js 代码</div>
        <div>4.buildJsWithBabel ： 表示是否需要将es6转译为es5</div>
        <div>5.buildCssWithLess ： 表示是否需要将less转译为css</div>
        <div>6.commonLess ： 表示是否在common.css中使用less</div>
    </div>
</div>


<script>
    new Jet();
</script>
